<template>
	<div class="detailBox">
		<img class="updatesimg" src="@/assets/UPDATES.png" />
		<div class="headerBox">
			<p class="title">
				玉米&玉米淀粉重点数据日度跟踪20250玉米&玉米淀粉重点数据日度跟踪20250玉米&玉米淀粉重点数据日度跟踪20250
			</p>
			<div class="tagtime">
				<div class="tag">农产品</div>
				<span class="time">2025年06月26日｜08:19:08</span>
			</div>
		</div>
		<div class="boxs">
			<div class="containerbox">
				<div class="clip">
					<div class="shade1"></div>
					<div class="shade2">
						<div></div>
						<img class="shade3" src="@/assets/xgj.png" />
					</div>
				</div>
				<el-button class="btn" color="#1356FF">登录查看更多内容</el-button>
			</div>
			<div class="contentbox">
				<div class="left">
					<p class="tag">综合点评:</p>
					<p class="content">
						今日玻璃期价小幅震荡，基本面变化不大。周今日玻璃期价小幅震荡，基本面变化不大。周今日玻璃期价小幅震荡，基本面变化不大。周今日玻璃期价小幅震荡，基本面变化不大。周今日玻璃期价小幅震荡，基本面变化不大。周
					</p>
					<p class="tag">投资建议:</p>
					<p class="content">
						随着高温、梅雨季节的来临，玻璃需求端将出随着高温、梅雨季节的来临，玻璃需求端将出随着高温、梅雨季节的来临，玻璃需求端将出随着高温、梅雨季节的来临，玻璃需求端将出随着高温、梅雨季节的来临，玻璃需求端将出随着高温、梅雨季节的来临，玻璃需求端将出随着高温、梅雨季节的来临，玻璃需求端将出
					</p>
					<div class="filebox">
						<img class="img1" src="@/assets/home/bzbf6.png" />
						<span class="title"
							>玉米&玉米淀粉重点数据日度跟踪：2025年6月25日</span
						>
						<img class="img2" src="@/assets/home/bzbf6.png" />
					</div>
				</div>
				<div class="right">
					<p class="tag">发布人</p>
					<div class="cards" v-for="(item, index) in issuers" :key="index">
						<img src="@/assets/kpbj.png" />
						<div class="namebox">
							<div class="name">{{ item.name }}</div>
							<div class="num">
								从业资格号：{{ item.cyzgh }} &nbsp;&nbsp; | &nbsp;&nbsp;
								投资咨询号：{{ item.tzzxh }}
							</div>
						</div>
						<div class="listbox">
							<div v-for="(item2, index2) in item.list" :key="index2">
								{{ item2.label }}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useTokenStore } from '@/store/modules/tokenStore'
import { request } from '@/utils/request'
import {errorPageHandler} from '@/utils/utils'

const route = useRoute()

const props = defineProps({
	data: [],
})
const issuers = ref([
	{
		name: '比尔盖茨',
		img: '123',
		cyzgh: 'F03107631',
		tzzxh: 'Z08978766',
		list: [
			{
				label: '玉米',
				id: 1,
			},
			{
				label: '橡胶',
				id: 2,
			},
		],
	},
	{
		name: '马斯克',
		img: '123',
		cyzgh: 'F03107631',
		tzzxh: 'Z08978766',
		list: [
			{
				label: '玉米',
				id: 1,
			},
			{
				label: '橡胶',
				id: 2,
			},
			{
				label: '煤炭',
				id: 2,
			},
			{
				label: '石油',
				id: 2,
			},
			{
				label: '天然气',
				id: 2,
			},
			{
				label: '金',
				id: 2,
			},
			{
				label: '银',
				id: 2,
			},
			{
				label: '铜',
				id: 2,
			},
			{
				label: '石油',
				id: 2,
			},
			{
				label: '天然气',
				id: 2,
			},
			{
				label: '金',
				id: 2,
			},
		],
	},
	{
		name: '乔布斯',
		img: '123',
		cyzgh: 'F03107631',
		tzzxh: 'Z08978766',
		list: [
			{
				label: '玉米',
				id: 1,
			},
			{
				label: '橡胶',
				id: 2,
			},
			{
				label: '铜',
				id: 2,
			},
		],
	},
])

//查询动态详情
function  getTrendInfo() {
  request.post('/wxapi/appletApi/dynamic/detail',{
    id: route.query.trendId
  }).then(res=>{
    console.log('详情',res);
    
        getDianping();
        // 疑问 神策埋点
    //         getApp().sensors.track('MP_HitTopicDetail_PageView', {
    //           previous_page_name: that.data.dizhi, //前向页面名称
    //           info_source: source,
    //           article_id: res.data.data.id, //文章id
    //           article_title: article_title, //文章标题
    //           content_type: "动态", //内容类型
    //           article_type_list: tags, //文章类型列表
    //           analyst_list: analyst_list, //研究员列表
    //           futures_category: item.catalogue ? item.catalogue : '', //期货类别
    //           futures_variety: futuresSpecies //期货品种

    //         });
  })
  }
//获取点评列表
function  getDianping() {
    request.post('/wxapi/appletApi/dynamic/getReviewList',{
       "researcherDynamicId": route.query.trendId,
        "page": 0,
        "pageSize": 100
    }).then(res=>{
      console.log('点评列表',res);
      
      // if (res.statusCode == 200) {
      //     if (res.data.code == 1) {

      //       res.data.data.list = res.data.data.list.filter(item => {
      //         if(item.review) {
      //           return true
      //         } else {
      //           return false;
      //         }
      //       })

      //       let isShowdp = false;
      //       if (res.data.data.list != null && res.data.data.list.length > 0) {
      //         isShowdp = true;
      //         var dianping = new Array();
      //         for (var i = 0; i < res.data.data.list.length; ++i) {
      //           var publisher = "";
      //           //发布人
      //           if (res.data.data.list[i].researcherInfos != null && res.data.data.list[i].researcherInfos.length > 0) {
      //             for (var j = 0; j < res.data.data.list[i].researcherInfos.length; ++j) {
      //               if (res.data.data.list[i].researcherInfos[j].consultNum != null) {
      //                 publisher = publisher + res.data.data.list[i].researcherInfos[j].userName + " ";
      //               } else {
      //                 publisher = publisher + res.data.data.list[i].researcherInfos[j].userName + " (联系人) ";
      //               }

      //             }
      //           }
      //           var time = that.formatDate(res.data.data.list[i].reviewTime);
      //           var data = {
      //             "publisherStr": publisher,
      //             "publishTime": time,
      //             "text": res.data.data.list[i].review
      //           };
      //           dianping.push(data);
      //         }
      //         that.setData({
      //           dpList: dianping
      //         });
      //       }
      //       that.setData({
      //         isShowdp
      //       })
      //     }
      //   }
    })
  }

onMounted(()=>{
// getTrendInfo()
console.log('???????????????????');

})
</script>

<style lang="less" scoped>
.detailBox {
	border-radius: 20px;
	padding: 252px 32px 19px;
	background-image: url('@/assets/kpbj.png');
	background-repeat: no-repeat;
	background-size: 1920px 936px;
	background-position: top end;
	background-color: #fff;
	position: relative;
	.updatesimg {
		position: absolute;
		width: 809px;
		top: 24px;
		left: 32px;
	}
}
.boxs {
	position: relative;
}
.contentbox {
	position: relative;
	padding: 30px 32px 0;
	display: flex;
	.tag {
		font-size: 16px;
		font-weight: 600;
		color: #0f142c;
		margin-bottom: 10px;
	}
	.content {
		font-size: 14px;
		color: @color-636976;
		margin-bottom: 30px;
	}
	.left {
		padding-right: 1.875rem;
		flex: 1;
		.filebox {
			display: flex;
			align-items: center;
			position: relative;
			background: #f9f9f9;
			border-radius: 4px;
			padding: 10px 15px;
			.img1 {
				width: 20px;
			}
			.title {
				color: #293366;
				font-size: 14px;
			}
			.img2 {
				position: absolute;
				right: 20px;
				width: 20px;
			}
		}
	}
	.right {
		width: 30%;
		position: relative;
		min-width: 350px;
		.cards {
			margin-bottom: 15px;
			background: #f9f9f9;
			border-radius: 8px;
			padding: 20px 20px 20px 70px;
			> img {
				position: absolute;
				left: 10px;
				width: 50px;
				height: 50px;
				border-radius: 50%;
			}
			.namebox {
				display: flex;
				margin-bottom: 10px;
				.name {
					font-size: 14px;
					margin-right: 1.5rem;
					padding-top: 0px;
					font-weight: 600;
					width: 70px;
				}
				.num {
					font-size: 12px;
					color: @color-636976;
				}
			}
			.listbox {
				display: flex;
				flex-wrap: wrap;
				gap: 0.625rem;

				> div {
					background: #f2f6ff;
					border-radius: 3px;
					color: #1356ff;
					font-size: 12px;
					padding: 1px 5px;
					border: 1px solid #1356ff;
				}
			}
		}
	}
}
.containerbox {
	position: absolute;
	height: 100%;
	top: 0;
	width: 100%;
	border-radius: 20px;
	.clip {
		width: 100%;
		height: 100%;
		display: flex;
		// background-color: red;
		align-items: end;
	}
}

.shade1 {
	flex: 1;
	height: 100%;
	background-color: #fff;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}
.shade2 {
	width: 190px;
	height: 100%;
	padding-top: 55px;
	position: relative;
	> div {
		background-color: #fff;
		border-top-right-radius: 20px;
		width: 100%;
		height: 100%;
		border-bottom-right-radius: 20px;
	}
}
.shade3 {
	position: absolute;
	left: -5px;
	top: 35px;
	// width: 100px;
}
.btn {
	position: absolute;
	top: 0;
	right: 0;
	padding: 19px 32px;
	font-size: 14px;
}
.headerBox {
	position: absolute;
	top: 70px;
	padding: 0 32px;
	.title {
		// width: 60%;
		// min-width: 900px;
		font-size: 26px;
		color: #071667;
		margin-bottom: 50px;
		// width: 90%;
	}
	.tagtime {
		display: flex;
		align-items: center;
		.tag {
			padding: 1px 5px;
			background: #dfe8fe;
			border-radius: 4px;
			color: #5483ee;
			border: 1px solid #5483ee;
			font-size: 12px;
			margin-right: 30px;
		}
		.time {
			font-size: 12px;
			color: #293366;
		}
	}
}

/* 当一行能放下所有元素时，改为两端对齐 */
@media (max-width: 900px) {
	.detailBox {
		border-radius: 20px;
		padding: 252px 32px 19px;
		background-image: url('@/assets/kpbj.png');
		background-repeat: no-repeat;
		background-size: 1920px 936px;
		background-position: top end;
		background-color: #fff;
		position: relative;
		.updatesimg {
			position: absolute;
			width: 80%;
			top: 24px;
			left: 32px;
		}
	}
	.headerBox {
		position: absolute;
		top: 50px;
		padding: 0 32px;
		.title {
			// width: 60%;
			// min-width: 900px;
			font-size: 24px;
			color: #071667;
			margin-bottom: 20px;
		}
		.tagtime {
			display: flex;
			align-items: center;
			.tag {
				padding: 3px 7px;
				background: #dfe8fe;
				border-radius: 4px;
				color: #5483ee;
				border: 1px solid #5483ee;
				font-size: 12px;
				margin-right: 30px;
			}
			.time {
				font-size: 12px;
				color: #293366;
			}
		}
	}
}
</style>
